<template>
  <yd-layout>
	  		<!--	header -->
	    <mt-header title="查看预订" fixed >
	      <router-link to="/hello" slot="left">
	        <mt-button icon="back"></mt-button>
	      </router-link>
	    </mt-header>
	    
       <yd-tabbar slot="top" style="margin-top: 40px;">
        <div>
          <yd-switch v-model="findByDept"></yd-switch>
        </div>
        <div style="margin:0 auto">
          <p style="color: #26A2FF;">是否显示部门预定信息</p>
        </div>
      </yd-tabbar>
       <yd-accordion style="margin-top: 10px;">
       <div style="text-align: center;font-size: 16px;" v-show="showNone">暂无数据</div>
        <yd-accordion-item v-for="(item,index) in data" :key="item.toString()">
          <div slot="title">
            <font>{{item.reason.length>5?item.reason.substring(0,4):item.reason}}</font>
              <div v-if="item.status === 0 ">
                <font style="float: right;">【
                  <font style="color: black;">
                    未审批
                  </font>
                  】</font>
              </div>
              <div v-else-if="item.status === -1 ">
                <font style="float: right;">【
                  <font style="color: red;">
                    拒绝
                  </font>
                  】</font>
              </div>
              <div v-else>
                <font style="float: right;">【
                  <font style="color: green;">
                    通过
                  </font>
                  】</font>
              </div>
              <font style="color: red;float: right;margin-right: 10px;">{{item.bookDate}}</font>
            </div>
            <div style="padding: .24rem;">
              <yd-cell-item>
                <span slot="left">部门:</span>
                <span slot="right">【{{item.book_userDept}}】</span>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left">预订人:</span>
                <span slot="right">{{item.book_userName}}</span>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left">目的:</span>
                <span slot="right">{{item.reason}}</span>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left">时间:</span>
                <span slot="right">{{item.bookDate+' '+item.bookWeek + ' ' +item.bookTime}}</span>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="right" v-if="item.status == 1 && item.book_user == me.id">
                  <yd-button @click.native="cancel(item.id)" type="danger">取消会议</yd-button>
                </span>
                <span slot="left" v-if="item.status == -1">理由:</span>
                <span slot="right" v-if="item.status == -1">{{item.refuse}}</span>
              </yd-cell-item>
            </div>
          </yd-accordion-item>
        </yd-accordion>
    </yd-layout>
</template>

<script>
  import bookApi from '@/api/bookApi.js'
  import { mapState, mapMutations } from 'vuex'
  import userApi from '@/api/userApi'
  import { MessageBox } from 'mint-ui'

  export default {
    computed: {
      ...mapState([
        'me'
      ]),
      showNone () {
        return this.data.length <= 0 ? true : false
      }
    },
    data() {
      return {
        data: [],
        findByDept: false
      }
    },
    watch: {
      findByDept: function() {
        this.loadData()
      }
    },
    methods: {
      ...mapMutations([
        'updateMe'
      ]),
      f(){
        window.alert(1)
      },
      loadData() {
        bookApi.findDeptBookList({
          param: this.findByDept
        })
          .then(data => {
            this.data = data
          })
          .catch(error => {})
      },
      cancel(id) {
        MessageBox.confirm('确定取消会议?')
          .then(action => {
            bookApi.cancel(id)
              .then(data => {
                this.$dialog.toast({
                  mes: '取消成功!',
                  timeout: 1000,
                  icon: 'success',
                  callback: () => {}
                })
                this.loadData()
              })
              .catch(err => {})
          })
      }
    },
    mounted() {
      this.loadData()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>